<template>
	<view>
		<!-- 模拟的标题 -->
		<!-- <image class="header" src="https://www.mescroll.com/img/beibei/header.jpg" mode="aspectFit"/> -->
		<nav-bar backState="2000">消息列表</nav-bar>
		<mescroll-body-diy ref="mescrollRef" @init="mescrollInit" top="0" bottom="100" @down="downCallback" @up="upCallback" >
			<!-- 轮播图 -->
			<view class="u-card-wrap" v-if="type_id">
				<u-cell-group >
					<u-cell-item center :is-link="true" :label="label" title="招聘信息"  index="index" @click="click" 
					 :arrow="arrow"  :icon="icon">
						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
					</u-cell-item>
				</u-cell-group>
			</view>
			<message-list :list="goods" v-if="messageListValue==0"></message-list>
			<view v-if="messageListValue==1"><u-empty :mode="mode"></u-empty></view>
			
		</mescroll-body-diy>
		
		<!-- 模拟的底部 -->
	<!-- 	<image class="footer" src="https://www.mescroll.com/img/beibei/footer.jpg" mode="aspectFit"/> -->
	</view>
</template>

<script>
	let _this
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/beibei/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import XsuuSwiper from "../../../components/Xss-swiper/Xsuu-swiper.vue"
	import navBar from "@/components/zhouWei-navBar/index";
	import messageList from "@/components/message-list/message-list.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy, // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
			XsuuSwiper,
			navBar,
			messageList
		},
		data() {
			return {
				icon: 'plus-people-fill',//图标
				arrow: true,//→箭头
				label: '',//描述
				rightSlot: true,//右侧badge
				checked: false,	
				messageListValue:0,//
				mode:'message',
				goods: [] ,// 数据列表
				type_id:'0',
				
			}
		},
		mounted() {
			_this= this;
		},
		methods: {
			click(index) {
				uni.navigateTo({
					url: '/pages/chat/chat-application/chat_application',
					animationType: 'fade-in'
				});
			},
			headClick(index) {
				console.log(index);
			},
			// 
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				try {
				    const value = uni.getStorageSync('setUserData');
				    if (value) {
				        console.log(value);
				    }
					this.type_id=value.type_id
				 //联网加载数据
				   console.log(value.user_id)
				    _this.$api.messageList.getUserMessageList(value.user_id).then(res=>{
					console.log("进入消息列表接口")
					console.log(res)
					let code=res.data.code
					let messageListData=res.data.data
					let messageListLen = messageListData.length; 

					//设置无数据状态
					if(code==204) this.messageListValue=1;
					
					//设置列表数据
					if(code!=200) this.goods = []; //如果是第一页需手动置空列表
					this.goods = this.goods.concat(messageListData); //追加新数据
					setTimeout(()=>{
							this.mescroll.endSuccess(messageListLen)
					},20)
				}).catch(err=>{
					console.log("接口调用失败")
					//联网失败, 结束加载
				 	this.mescroll.endErr();
				})
				} catch (e) {
				    // error
				}

			}
		}
	}
</script>

<style>
	image{width: 100%;vertical-align: bottom;height:auto;display: block;}
	.header{z-index: 9900;position: fixed;top: --window-top;left: 0;height: 180upx;background: white;}
	.footer{z-index: 9900;position: fixed;bottom: 0;left: 0;height: 100upx;background: white;}
	.search_box {
		margin-right: 30upx;
		width: 300upx;
		height: 64upx;
		background-color: #f5f5f5;
		border-radius: 32upx;
		display: flex;
		align-items: center;
		padding: 0upx 40upx;
	
		.prompt {
			font-size: 28upx;
			color: #cccccc;
		}
		.icon_search {
			background-image: url('../../../static/map_ic_search.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 29upx;
			height: 28upx;
			margin-right: 20upx;
		}
	}
	
	.u-demo {
		padding-top: 0;
	}
	
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
